什麼叫樣板字面值

樣板字面值（Template Literals），在之前的JavaScript先行版本中又稱為Template String，主要是解決字串在串接時，因為多行或過長，而導致的程式碼閱讀困難問題，利用樣板字面值，可以讓字串串接時變得簡潔易讀。

樣板字面值寫法

傳統的串接方式，是用半形單引號（''）或是半形雙引號（""），搭配半形加號（+），將字詞串接起來。

var surname = "Lin";
var name = "Jessie";
console.log("My name is "+name+" "+surname+".");

而字面樣板值的寫法，是將所有的字串全部用半形反引號包覆起來，再將要替換的字詞放在半形大括弧（{}）中，大括弧前面接半形錢字號（$）。

半形反引號的位置，在鍵盤的左上角，esc鍵的正下方，數字1鍵的左方。

寫法是：

var 變數A;
var 變數B;

str = `原本的字串${變數A}原本的字串${變數B}原本的字串`;

所以如果以樣板字面值改寫上方傳統字串串接的程式碼，就會變成：

var surname = "Lin";
var name = "Jessie";
console.log(`My name is ${name} ${surname}.`);

字串間如果需要空白，只要在半形錢字號（$）前留下空白就可以了。

樣板字面值的預設值

樣板字面值和傳統字串串接的方式最大的不同，是可以設定預設值，在字串串接的變數不用時，可以用表達式的方式，設定預設值。

var surname = "";
var name = "";
console.log(`My name is ${name||'John'} ${surname||'Doe'}.`);

所以在上面的程式碼中，如果沒有設定變數name，就會出現John的預設值，變數surname也是同樣情況，如果沒有設定，就會出現Doe的預設值。

多行字串的串接

在傳統的串接方式，多行字串在換行時，需要加半形反斜線（\），半形反斜線（\）位置在鍵盤右側，enter鍵的正上方。

這樣的字串串接，會使得閱讀上非常麻煩。

str = "<ul>\
<li>我是1</li>\
<li>我是2</li>\
<li>我是3</li>\
</ul>"
console.log(str);

這樣的程式碼，如果用樣板字面值來寫，就會容易得多：

str = `<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
</ul>`
console.log(str);

用樣板字面值來寫這段程式碼，不需要加半形反斜線（\），而且程式碼乾淨利落，容易閱讀。